import { createBrowserRouter, createHashRouter, Navigate } from "react-router-dom";
import { lazy } from "react";

import { BankOutlined, BugOutlined, DollarOutlined } from "@ant-design/icons";

const Layout = lazy(() => import("../pages/layout"));
const Login = lazy(() => import("../pages/login"));
const Reg = lazy(() => import("../pages/reg"));
const Error404 = lazy(() => import("../pages/error404"));
const Home = lazy(() => import("../pages/home"));
const User = lazy(() => import("../pages/user"));
const Order = lazy(() => import("../pages/order"));
const UserList = lazy(() => import("../pages/userList"));
const UserAdd = lazy(() => import("../pages/userAdd"));
const OrderList = lazy(() => import("../pages/orderList"));
const OrderAdd = lazy(() => import("../pages/orderAdd"));

// createBrowserRouter   history 模式
// createHashRouter      hash 井号模式

const pagesAll = {
    home: {path:'/layout/home', element: <Home />, title:'首页',icon: <BankOutlined />},
    user: {path:'/layout/user', element: <User />, title:'用户管理',icon: <BankOutlined />, children:[
        {path:'/layout/user/userList', element: <UserList /> , title:'用户列表',icon: <BankOutlined />},
        {path:'/layout/user/userAdd', element: <UserAdd /> , title:'用户表单',icon: <BankOutlined />}
    ]},
    order: {path:'/layout/order', element: <Order />, title:'订单管理',icon: <BankOutlined />, children:[
        {path:'/layout/order/orderList', element: <OrderList />,title:'订单列表',icon: <BankOutlined />, },
        {path:'/layout/order/orderAdd', element: <OrderAdd />,title:'订单管理',icon: <BankOutlined />, }
    ]},
}

const rolesAll = {
    admin:{
        pages: ['home', 'user', 'order'],
        btns: {
            home:['query', 'del', 'add', 'edit'],
            user: ['query', 'del', 'add', 'edi']
        }
    },
    user: {
        pages: ['home', 'user'],
        btns: {
            home:['add', 'edit']
        }
    }
}

const username = localStorage.getItem('username') || 'admin'
const { pages, btns } = rolesAll[username];

export const routes = pages.map((item, index) => {
    return {
        ...pagesAll[item],
        loader() {
            return btns[item]
        }
    }
})

console.log(routes)

const routers = createBrowserRouter([
    {path: '*', element: <Error404 />},
    {path: '/', element: <Navigate to="/layout/home" />},
    {path: '/login', element: <Login />},
    {path: '/layout', element: <Layout />, children: routes}
])


export default routers;

// 登录
// 父级（都有左侧导航）  路由守卫
// 首页
// 用户
//     用户列表
//     用户添加
// 订单
//     订单列表
//     订单添加
// 404页面
// 注册
